<template>
  <Table
    ref="tableRef"
    :url="URL_PAGINGADVERTISEMENT"
    :columns="data.columns"
    :handles="data.handles"
    :toolbar="data.toolbar"
    :query="data.query"
  ></Table>
</template>

<script lang="ts" setup name="adList">
import Table from '@/components/table/index.vue';
import {
  URL_PAGINGADVERTISEMENT,
  advertGround,
  advertDelete,
} from '@/service/apis/market';
import { queryDicByParent } from '@/service/apis/api';

const router = useRouter();

const tableRef = ref();

const emit = defineEmits(['get-update']);
onActivated(() => {
  emit('get-update', (flag: boolean) => {
    if (flag) {
      tableRef.value?.getData();
    }
  });
});

queryDicByParent({
  listDtos: ['advType', 'advState', 'advLocation'],
}).then((res: any) => {
  data.columns[1].dic = res.advType;
  data.columns[2].dic = res.advLocation;
  data.columns[3].dic = res.advState;
  data.query[1].props.options = res.advType;
  data.query[2].props.options = res.advLocation;
  data.query[3].props.options = res.advState;
});

const data = reactive({
  columns: [
    {
      prop: 'advName',
      label: '广告名称',
    },
    {
      prop: 'advType',
      label: '广告类型',
      dic: [] as any,
    },
    {
      prop: 'advLocation',
      label: '广告位置',
      dic: [] as any,
    },
    {
      prop: 'advState',
      label: '广告状态',
      dic: [] as any,
    },
    {
      prop: 'showPriority',
      label: '展示优先级',
    },
  ],
  handles: [
    {
      label: '修改',
      permission: 'adList.edit',
      disabledFun: (row: any) => {
        return row.ground;
      },
      handle: (row: any) => {
        console.log('编辑---', row);
        router.push({
          name: 'adEdit',
          query: { id: row.id },
        });
      },
    },
    {
      label: '上架',
      permission: 'adList.use',
      labelFun: (row: any) => {
        return Number(row.advState) < 2 ? '下架' : '上架';
      },
      disabledFun: (row: any) => {
        return row.advState === '2' || row.ground;
      },
      handle: (row: any) => {
        console.log('上下架---', row);
        const msg =
          Number(row.advState) < 2
            ? '下架后的广告将不在移动端展示，确认下架？'
            : '上架后的广告在移动端正常展示，确认上架？';
        ElMessageBox.confirm(msg, '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          advertGround({
            id: row.id,
            deliveryEnd: row.deliveryEnd,
            soldOut: Number(row.advState) < 2 ? true : false,
          }).then((res: any) => {
            // row.advState = res.advState;
            tableRef.value.getData();
          });
        });
      },
    },
    {
      label: '删除',
      permission: 'adList.delete',
      color: '#FA3939',
      disabledFun: (row: any) => {
        return row.advState === '1';
      },
      handle: (row: any) => {
        ElMessageBox.confirm('此操作将永久删除该数据，是否继续？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          advertDelete({
            id: row.id,
          }).then((res: any) => {
            tableRef.value.getData();
          });
        });
      },
    },
  ],
  toolbar: [
    {
      label: '新增',
      permission: 'adList.add',
      icon: 'icon-add',
      type: 'primary',
      handle: (row: any) => {
        router.push({
          name: 'adAdd',
        });
      },
    },
  ],
  query: [
    {
      label: '广告名称',
      prop: 'advName',
      comName: 'input',
      props: {
        placeholder: '请输入广告名称',
      },
    },
    {
      label: '广告类型',
      prop: 'advType',
      comName: 'select',
      props: {
        placeholder: '请选择广告类型',
        change: (value: any) => {
          console.log(value);
        },
        options: [] as any,
      },
    },
    {
      label: '广告位置',
      prop: 'advLocation',
      comName: 'select',
      props: {
        placeholder: '请选择广告位置',
        change: (value: any) => {
          console.log(value);
        },
        options: [] as any,
      },
    },
    {
      label: '广告状态',
      prop: 'advState',
      comName: 'select',
      props: {
        placeholder: '请选择广告状态',
        change: (value: any) => {
          console.log(value);
        },
        options: [] as any,
      },
    },
    {
      label: '优先级',
      prop: 'showPriority',
      comName: 'input',
      props: {
        type: 'number',
        placeholder: '请输入优先级',
      },
    },
    {
      label: '开始时间',
      prop: 'startTime',
      comName: 'date',
      keys: ['advertiseStartTime', 'advertiseEndTime'],
      props: {
        type: 'daterange',
      },
    },
    {
      label: '结束时间',
      prop: 'endTime',
      comName: 'date',
      keys: ['endAdvertiseStartTime', 'endAdvertiseEndTime'],
      props: {
        type: 'daterange',
      },
    },
  ],
});
</script>